<template>
  <div>
    首页
    <button @click="btnClick">测试数据</button>
    <h3>动画</h3>
    <button @click="show = !show">按钮切换</button>
    <!-- 动画实现
    1、将动画元素用transition包住
    2、在transition标签周昂加入name属性
    3、scc配置
       .xxx-enter:进入前状态，进入时希望从什么状态变到正常状态
       .xxx-enter-active：进入过程中一致存在的css状态。它主要用于承载transition
       .xxx-leave-to：离开时状态，离开时希望从什么状态变到正常状态
       .xxx-leave-active：离开过程中一致存在的css状态。它主要用于承载transition
     -->
    <transition name="fade">
      <div v-if="show" class="box" />
    </transition>
    <button @click="btnGet">获取环境</button>
    <!-- table -->
    <h3>element中的tabel</h3>
    <el-table :data="tableData">
      <el-table-column label="日期" prop="date" />
      <el-table-column label="姓名" prop="name" />
      <el-table-column label="地址" prop="address" />
      <el-table-column label="操作">
        <template v-slot="{ $index, row }">
          {{ $index }}-----{{ row }}
          <el-button>编辑</el-button>
          <el-button>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { sysLoing } from '@/api/test.js'
export default {
  data() {
    return {
      show: true,
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    }
  },
  methods: {
    async btnClick() {
      const res = await sysLoing()
      console.log(res)
    },
    btnGet() {
      console.log(process.env.VUE_APP_XXX, process.env.VUE_APP_ABC)
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 300px;
  height: 300px;
  background-color: #f00;
  margin: 0 auto;
}
.fade-enter {
  opacity: 0;
  transform: translateX(-200px);
}
.fade-enter-active {
  transition: all 3s;
}
.fade-leave-to {
  opacity: 0.5;
  transform: translateX(200px);
}
.fade-leave-active {
  transition: all 3s;
}
</style>
